<template>
  <div class="productskill p20">
    <div class="searchDiv p20 thirdInfo">
      <div class="flex">
        <div class="flex-3">
          <h2 class="h2">{{thirdObj.tpa_name}}</h2>
          <div class="">总开通授权：{{thirdObj.re_num}}&nbsp;;&nbsp;剩余授权数：{{thirdObj.rn_num}}</div>
          <div class="flex">
            <div class="w10">描述：</div>
            <div class="flex-1">
              <div class="" v-html="thirdObj.desc"></div>
            </div>
          </div>
        </div>
        <div class="flex-1 tar">
          <el-button @click="$router.go(-1)">返回</el-button>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeTab" type="card" @tab-click="handleClick" class="mt20">
      <el-tab-pane label="授权订单" name="1">
        <div class="btnDiv">
          <el-button @click="rechDio=true">新增订单</el-button>
        </div>
        <gl-table @button="openEdit" tooltip-effect="dark" class="mt20" :data="indexTable"
                  :columns="indexColumns"></gl-table>
        <gl-pagination layout="total,prev, pager, next, jumper" :size="pageSize" :total="total"
                       @callback="pageChange"></gl-pagination>
      </el-tab-pane>
      <el-tab-pane label="授权占比" name="2">
        <div class="mb20">
          <gl-select :options="userList" class="" v-model="userSel" placeholder="客户名称" @change="getproduct"
                     clearable></gl-select>
          <gl-select :options="prodList" class="ml20" v-model="prodSel" placeholder="产品名称" @change="getRatio(1)"
                     clearable></gl-select>
        </div>
        <gl-table tooltip-effect="dark" :data="radioTable" :columns="radioTableColumns"></gl-table>
        <gl-pagination @callback="pageChangeRa" :size="pageSize_ra"
                       layout="total,prev, pager, next, jumper"
                       :total="total_ra"></gl-pagination>
      </el-tab-pane>
    </el-tabs>

    <!--充值弹窗-->
    <el-dialog :title="rechform.rn_id ? '编辑授权订单' : '添加授权订单'" :visible.sync="rechDio" width="" center>
      <gl-form ref="form" :form="rechform" :form-label="recheditLabel" label-width="90px"
               must="rn_num,rn_name,rn_price"></gl-form>
      <span slot="footer">
    		<el-button @click="rechDio = false">取 消</el-button>
    		<el-button type="primary" @click="setRech()">确 定</el-button>
  		</span>
    </el-dialog>

  </div>
</template>
<script>
  import {mapGetters} from 'vuex'

  export default {
    name: "StatisticsThirdDetail",
    computed: {
      ...mapGetters(['userInfo'])
    },
    data() {
      return {
        thirdObj: {},//详情

        activeTab: '1',

        indexTable: [],//订单列表
        indexColumns: [
          {label: 'ID', prop: 'rn_id', width: '60px'},
          {label: '批次', prop: 'rn_name', width: '300px'},
          {label: '单价', prop: 'rn_price', format: val => this.tools.moneyNumber(val, 2)},
          {label: '数量', prop: 'rn_num', format: val => this.tools.moneyNumber(val)},
          {label: '总价', prop: 'total_price', format: val => this.tools.moneyNumber(val, 2)},
          {label: '时间', prop: 'create_time'},
          {label: '操作', btns: ['编辑']},
        ],//订单列表列

        curr: 1,//当前页
        pageSize: 10,//每页条数
        total: 0,//总页数

        userSel: '',//客户名称
        userList: [],
        prodSel: '',//产品名称
        prodList: [],

        radioTable: [],//占比列表
        radioTableColumns: [
          {label: '序号', prop: 'order_id', width: '80px'},
          {label: '产品', prop: 'product_name'},
          {label: '客户', prop: 'customer_name'},
          {label: '激活数量', prop: 'sum_num', format: val => this.tools.moneyNumber(val)},
        ],//占比列表列

        curr_ra: 1,//当前页
        pageSize_ra: 10,//每页条数
        total_ra: 0,//总页数

        rechDio: false,//充值弹窗
        rechform: {
          rn_num: '',//充值数
          rn_name: '',//充值名称
          rn_price: '',//单价
        },
        recheditLabel: [
          {label: '充值数:', prop: 'rn_num'},
          {label: '订单名称:', prop: 'rn_name'},
          {label: '单价:', prop: 'rn_price'},
        ],

      };
    },
    created() {
      this.activeTab = '1';
      this.getInfo();
      this.getOrder();
      this.getuser();
    },
    methods: {
      //获取客户
      getuser() {
        this.http.$post('admin/customer.api/list_customers', {
          company_id: this.userInfo.company_id,
        }).then(res => {
          this.userList = res;
          this.getproduct();
        }).catch(console.log);
      },
      //获取产品
      getproduct() {
        this.http.$post('admin/product.api/get_list', {
          curr: 0,
          limits: 0,
          customer_id: this.userSel,
        }).then(res => {
          if (!res.list.find(e => e.id === this.prodSel)) {
            this.prodSel = '';
          }
          this.prodList = res.list;
          this.getRatio(1);
        }).catch(this.$err);
      },
      //打开编辑充值
      openEdit(index) {
        this.rechform = {...index.row};
        this.rechDio = true;
      },
      //获取第三方授权详情
      getInfo() {
        this.http.$post('admin/thirdpa.api/tpa_default', {
          'tpa_id': this.$route.params.id,//第三方id
        }).then(res => {
          this.thirdObj = res;
        }).catch(this.$err);
      },
      //获取充值列表
      getRatio(curr, limits) {
        const loading = this.$loading({
          lock: true,
          text: "加载中...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        this.http.$post('admin/thirdpa.api/tpa_product', {
          'tpa_id': this.$route.params.id,//第三方ID
          'customer_id': this.userSel,//客户ID
          'product_id': this.prodSel,//产品ID
          'curr': curr ? curr : this.curr_ra,//当前页
          'limits': limits ? limits : this.pageSize_ra,//每页显示数量
        }).then(res => {
          setTimeout(() => {
            loading.close();
            this.radioTable = res.list;
            this.total_ra = res.total;
          }, 500);
        }).catch(err => {
          setTimeout(() => {
            loading.close();
            this.$err(err);
          }, 500);

        });
      },
      pageChangeRa(val) {
        this.curr_ra = val.curr;
        this.getRatio(val.curr);
      },
      //添加充值
      setRech(formName) {
        if (this.$refs.form.validate()) {
          let url = 'admin/thirdpa.api/recharge';
          let params = {};
          ['rn_id', 'rn_num', 'rn_name', 'rn_price'].map(k => {
            params[k] = this.rechform[k];
          });
          params.rn_id && (url = 'admin/thirdpa.api/recharge_update');

          this.http.$post(url, {
            ...params,
            'tpa_id': this.$route.params.id,//ID
          }).then(res => {
            this.rechDio = false;
            this.getOrder();
            params.rn_id && this.getInfo();
            this.$message.success(params.rn_id ? '编辑成功' : '添加成功！');
            this.rechform = {
              rn_num: '',
              rn_name: '',
              rn_price: '',
            };
          }).catch(this.$err);
        } else {
          return false;
        }
      },
      handleClick(tab, event) {
        if (tab.name === "1") {
          this.getOrder();
        } else if (tab.name === "2") {
          this.getRatio();
        }
      },
      //获取充值列表
      getOrder(curr, limits) {
        const loading = this.$loading({
          lock: true,
          text: "加载中...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        this.http.$post('admin/thirdpa.api/tpa_recharge_list', {
          'tpa_id': this.$route.params.id,//第三方ID
          'curr': curr ? curr : this.curr,//当前页
          'limits': limits ? limits : this.pageSize,//每页显示数量
        }).then(res => {
          setTimeout(() => {
            loading.close();
            this.indexTable = res.list;
            this.total = res.total;
          }, 500);
        }).catch(err => {
          loading.close();
          this.$err(err);
        });
      },
      pageChange(val) {
        this.curr = val.curr;
        this.getOrder(val.curr);
      },
    }
  };
</script>
<style lang="less" scoped>
  .productskill {
    background-color: #fff;
  }

  .thirdInfo {
    color: #666;
    .h2 {
      font-size: 18px;
      padding-bottom: 10px;
      color: #333;
    }
  }

  .w150 {
    width: 150px;
  }

  .w200 {
    width: 200px;
  }

  .searchDiv {
    background: #f2f2f2;
    border: 1px solid #ddd;
  }
</style>